<template>
  <div class="weixinForm">
    <el-form :model="weixinForm" :rules="rules" ref="weixinForm" label-width="130px" label-position="left">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item :label="$t('configLazyLoad.channel.appletName')" prop="displayName">
            <el-input size="mini" v-model.trim="weixinForm.displayName" auto-complete="off"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-if="isAddOrEdit === 'add'">
        <el-col :span="24">
          <el-form-item :label="$t('configLazyLoad.channel.wexinAPPTip3')" prop="upload">
            <el-upload
              class="temp-upload"
              :action="uploadUrl"
              accept=".txt"
              :data="uploadHeaders"
              :with-credentials="true"
              :on-error="removeUploadList"
              :on-remove="removeUploadList"
              :on-success="uploaded"
              ref="upload"
              name="upload"
            >
              <el-button class="small_btn" size="mini">{{$t('configLazyLoad.channel.wexinAPPTip28')}}</el-button><span style="font-size: 12px;margin-left:10px;">{{$t('configLazyLoad.channel.wexinAPPTip29')}}</span>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-else>
        <el-col :span="24">
          <el-form-item :label="$t('configLazyLoad.channel.wexinAPPTip3')" prop="robot">
            <el-input size="mini" v-model.trim="weixinForm.file" auto-complete="off" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
<!--      <el-row :gutter="20">
        <el-col>
          <div class="fr" style="margin-top:20px;">
            <el-button class="primary_btn" @click="isSmsTempEditShow = false">取消</el-button>
            <el-button class="primary_btn" type="primary" @click="submitUpload">确定</el-button>
          </div>
        </el-col>
      </el-row>-->
    </el-form>
  </div>
</template>

<script>
  export default {
    name: '',
    props: {
      isAddOrEdit: {
        type: String,
        default: 'add'
      },
      weixinH5Form: {
        type: Object,
        default: {}
      }
    },
    data () {
      return {
        rules: {
          displayName: [
//            { required: true, message: '必填', trigger: 'blur' }
          ]
        },
        filePath: '',
        fileName: '',
        uploadUrl: '/fileUpload',
        isSmsTempEditShow: false,
        uploadHeaders: {
          type: 'undefined',
          module: '',
          sessionId: this.$store.state.session.sessionId
        }
      }
    },
    components: {},
    computed: {
      weixinForm () {
        return this.weixinH5Form
      }
    },
    watch: {
      isAddOrEdit (cur) {
        if (cur === 'add') {
          this.$emit('resetFields')
        }
      }
    },
    methods: {
      uploaded (response, file, fileList) {
        this.filePath = ''
        this.fileName = ''
        this.isSmsTempEditShow = true
        if (response && response.filePath) {
          let fileName = /[^.]+$/.exec(response.fileName)
          if (fileName && fileName[0] === 'txt') {
            if (file.size > 1024) { // 最多上传1K
              this.$message.error(this.$t('configLazyLoad.channel.wexinAPPTip30'))
              this.$refs.upload.clearFiles()
              return false
            } else if (file.size <= 0) {
              this.$message.error(this.$t('configLazyLoad.channel.appTip14'))
              this.$refs.upload.clearFiles()
              return false
            }
            this.filePath = response.filePath
            this.fileName = response.fileName
          } else {
            this.$message.error(this.$t('sms.uploadFileWrong'))
            this.$refs.upload.clearFiles()
            return false
          }
        } else {
          this.$message.error(this.$t('webchat.uploadError'))
          this.$refs.upload.clearFiles()
          return false
        }
      },
      removeUploadList () {
        this.$refs.upload.clearFiles()
      },
      queryWeixinProList () {
        this.$emit('refresh')
      },
      submitUpload () {
        let self = this
        if (this.isAddOrEdit === 'add') {
          this.$refs['weixinForm'].validate((valid) => {
            if (valid) {
              if (!self.filePath) {
                self.$message.error(this.$t('configLazyLoad.channel.wexinAPPTip28'))
                return
              } else {
                let data = {'filePath': self.filePath, 'fileName': self.fileName, 'displayName': self.weixinForm.displayName}
                self.$store.dispatch('addWeixinMiniAppCheckFile', data).then((resp) => {
                  if (resp && resp.success) {
                    self.queryWeixinProList()
                    self.isSmsTempEditShow = false
                    self.$message({
                      message: this.$t('configLazyLoad.channel.addSucc'),
                      type: 'success'
                    })
                  } else {
                    if (resp.message === 'unknow error!') {
                      self.$message.error(this.$t('configLazyLoad.robotSeven.errorMessage2'))
                    }
                    self.$refs.upload.clearFiles()
                  }
                })
              }
            }
          })
        } else {
          this.$refs['weixinForm'].validate((valid) => {
            if (valid) {
              let data = {'_id': self.weixinForm._id, 'displayName': self.weixinForm.displayName}
              self.$store.dispatch('updateWeixinMiniAppCheckFile', data).then((resp) => {
                if (resp && resp.success) {
                  self.queryWeixinProList()
                  self.isSmsTempEditShow = false
                  self.$message({
                    message: this.$t('configLazyLoad.public.editSuccess'),
                    type: 'success'
                  })
                } else {
                  if (resp.message === 'unknow error!') {
                    self.$message.error(this.$t('configLazyLoad.robotSeven.errorMessage2'))
                  }
                }
              })
            }
          })
        }
      }
    },
    beforeMount () {
    }
  }
</script>

<style lang="stylus" scoped>
.weixinForm
  padding 20px
</style>